6.4日学习总结css伪元素hover,active,focus |
您所在的位置：网站首页 › focus 选择器 › 6.4日学习总结css伪元素hover,active,focus |
6.4日学习总结css伪元素hover,active,focus
|
selector::pseudo-element {
property: value;
}
添加伪元素的语法为 "选择器" +::+"伪元素" 最常用的伪元素hover,意为鼠标悬浮状态下css显示的样式 以按钮的样式为例 .btnst2{ width:79px; font-size:17px; padding:5px; border-radius:17px; background-color:green; border:3px solid black; } .btnst2:hover{ background-color: #008CBA; color: white; border-radius:17px 0px 3px 0px; }悬浮前 悬浮后 active，点击时展示的样式，多用于超链接等可点击控件，下面以超链接为例 a:active { background-color:yellow; }点击前 点击后 focus，获取焦点时展示的样式，一般用于输入框等需要键鼠输入的对象
伪元素可以让不同状态下的对象所展现的样式大不相同，但是突然的变化并不一定能起到美化页面的作用，这里可以使用transition属性来使样式变化从突变变成渐变 示例 DOCTYPE html> h1 { font-size:17px; transition:font-size 2s; } h1:hover { font-size:71px; } 请把鼠标指针移动到文字上，就可以看到过渡效果。要想定义多个属性变化渐变效果，只需要 transition: 属性1 2s, 属性2 1.8s, ......; 即可实现。
|
【本文地址】
今日新闻 |
推荐新闻 |